<template>
  <div class="tool-wrap">
    <div class="tool">
      <div class="tool-item" @click="btnConsult">
        <img src="@/static/tool/tool_0.png" />
        <span>在线咨询</span>
      </div>
      <a class="tool-item line" target="_blank" href="https://shop568040925.taobao.com/shop/view_shop.htm">
        <img src="@/static/tool/tool_1.png" />
        <span>官方淘宝</span>
      </a>
      <div class="tool-item line scan-code">
        <img src="@/static/tool/tool_2.png" />
        <span>扫码关注</span>
        <img class="ewm" src="@/static/ewm_1.png">
      </div>
      <div class="tool-item line" v-show="toTop" @click="btnToTop">
        <img src="@/static/tool/tool_3.png" />
        <span>返回顶部</span>
      </div>
    </div>
    <Dialog ref="dialog" />
  </div>
</template>
<script>
import { mobileConsult, browserRedirect } from '@/components/mobileConsult.js'
import $ from 'jquery'
export default {
  props: {
	},
	data () {
		return {
      toTop: false
    }
	},
	methods: {
		action () {
			this.isShow = !this.isShow
		},
    btnToTop () {
      $('html,body').animate({scrollTop: 0}, 500)
    },
    btnConsult () {
      if (!browserRedirect()) {
        this.$refs.dialog.action()
      }
    }
  },
  mounted () {
    const that = this
    $(document).scroll(() => {
      const top = $(document).scrollTop()
      if (top > 100) {
        that.toTop =  true
      } else {
        that.toTop =  false
      }
    })
  }
}
</script>
<style lang="sass" scoped>
@media screen and (max-width: 750px)
  .tool-wrap
    display: none
@media screen and (min-width: 750px)
  .tool
    padding: 0 8px
    width: 70px
    background: #fff
    border-radius: 4px
    position: fixed
    top: 40%
    right: 50px
    box-shadow: 0px 6px 16px rgba(19, 27, 39, 0.1)
    .line
      border-top: 1px solid #E7E7E7
    .scan-code
      &:hover .ewm
        display: block
    .tool-item
      text-align: center
      padding: 8px 0
      width: 54px
      display: block
      text-decoration: none
      position: relative
      cursor: pointer
      img
        width: 28px
        margin-bottom: 3px
      span
        display: block
        width: 54px
        line-height: 17px
        font-size: 12px
        color: rgba(48, 54, 64, 0.5)
      .ewm
        width: 80px
        position: absolute
        top: 0px
        left: -96px
        display: none
</style>
